<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
</head>
<body>
<div class="layui-form layui-form-pane" style="margin: 30px;">
    <h2 style="margin: 20px; font-weight: bold">发布文章</h2>
    <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
            <input id="title" type="text" name="articleTitle" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章分类<span style="color: red">*</span></label>
        <div class="layui-input-inline">
            <div class="articleCategorySelect" id="articleCategorySelect"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章类型<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="radio" name="articleType" value="1" title="原创" checked="">
            <input type="radio" name="articleType" value="2" title="转载">
            <input type="radio" name="articleType" value="3" title="翻译">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">允许评论<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="radio" name="allowComment" value="1" title="是" checked="">
            <input type="radio" name="allowComment" value="2" title="否">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布形式<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="radio" name="releaseForm" value="1" title="公开" checked="">
            <input type="radio" name="releaseForm" value="2" title="私密">
            <input type="radio" name="releaseForm" value="3" title="粉丝可见">
        </div>
    </div>
    <div class="layui-btn-container" style="margin: 35px 10px;position: fixed;bottom: 0;right: 5%;">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" onclick="closeRelease()">取消</button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">定时发布</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">保存草稿</button>
        <button type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="releaseArticleBtn">发布文章</button>
    </div>
</div>

</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/xm-select/xm-select.js"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<script>

    $(document).ready(function(){
        //获取博客类型，给博客标题赋值
        checkArticleType();
    })

    function checkArticleType(){
        var articleId = parent.document.getElementById("articleId").value;
        var articleTitle = parent.document.getElementById("articleTitle").value;
        if (articleId != ''){
            $("#title").val(articleTitle);
        }
    }


    layui.use(['form'],function (){
        var form = layui.form;


        form.on('submit(releaseArticleBtn)',function (obj){
            var articleContent = $("#articleContent",parent.document).val();
            var data = obj.field;
            if (articleContent.length == '' ||　articleContent.length == 0){
                layer.msg('博客内容不能为空',{icon:0,time:800});
                return false;
            }
            if (data.articleTitle == ''){
                layer.msg('文章标题为空',{icon:0,time:800});
                return false;
            }
            if (demo1.getValue('valueStr') == ''){
                layer.msg('请选择文章分类',{icon:0,time:800});
                return false;
            }
            var category = demo1.getValue('valueStr');
            $.ajax({
                url:"/article/write/releaseArticle",
                dataType: 'json',
                type: 'post',
                data:{
                    'articleTitle' : data.articleTitle,
                    'category' : category,
                    'articleContent': articleContent,
                    'articleType': data.articleType,
                    'allowComment': data.allowComment,
                    'releaseForm': data.releaseForm,
                },
                success: function (res){
                    if (res.state == true){
                        var index = parent.layer.getFrameIndex(window.name);//获取当前iframe层的索引
                        parent.layer.close(index);//执行关闭
                        parent.window.location.href = "/";
                    }else {
                        layer.msg('保存失败',{icon:2,time:800})
                    }
                }
            })
        })
    })

    //多选下拉框
    var demo1 = xmSelect.render({
        el: '#articleCategorySelect',
        // radio: true,
        clickClose: false, //点击之后关闭
        theme: {
            color: '#0081ff',
        },
        data: getCategoryData()
    })

    /**
     * 获取博客分类下拉框数据
     */
    function getCategoryData(){
        var catagoryData;
        $.ajax({
            url: "/category/queryAllCategory",
            type: "post",
            async:false,//取消异步请求
            success: function (res){
                var data = res.data;
                var dataValue = new Array();
                for (var i = 0; i < data.length; i++) {
                    var array = data[i];
                    var obj = new Object();
                    obj.name = array.categoryName;
                    obj.value = array.id;
                    dataValue.push(obj);
                }
                catagoryData = dataValue;
            }
        })
        return catagoryData;
    }

    function closeRelease(){
        var index = parent.layer.getFrameIndex(window.name);//获取当前iframe层的索引
        parent.layer.close(parent.layer.getFrameIndex(window.name));//执行关闭
    }

    function releaseArticle(){
        var articleContent = $("#articleContent",parent.document).val();

    }
</script>
</html>
